import styles from './index.less'

import routesArr from '@/routes'
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useLocation } from 'react-use';
import { Link } from 'umi';

import Tabs from '@/components/Tabs';

const Home: React.FC = (props) => {
  const locationState = useLocation();
  const curType = useMemo(() => {
    const urlSearchParams = new URLSearchParams(locationState.search);
    return urlSearchParams.get('type') || '';
  }, [locationState]);

  const [tabData, setTabData] = useState<{ label: string; value: string; }[]>();

  useEffect(()=>{
    let tabs: { label: string; value: string; }[] = []
    routesArr.forEach(route=>{
      if(route.title==='home') return
      tabs.push({label:route.title,value:route.title})
    })
    setTabData(tabs)
  },[])

  const List = useCallback(()=>{
    let children: any[] = []
    routesArr.some(route=>{
      if(route.title === curType){
        children = route.routes
        return true
      }
    })
    return (
      <ul className={styles['list']}>
        {
          children.map(child=>{
            return <Link to={child.path} key={child.path} className={styles['list-item']}>{child.title.split('-').join(' ')}</Link>
          })
        }
      </ul>
    )
  },[curType])

  return (
    <div className='page-container'>
      <div className='scroll-container'>
        {tabData ? <Tabs data={tabData} /> : <></>}
        {List()}
      </div>
    </div>
  );
};

export default Home;
